<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>网页彩色时钟</title>
    <style type="text/css">
        div {
            background-image: url("./../asset/images/time.jpg");
            width: 400px;
            height: 400px;
            text-align: center;
            line-height: 400px;
        }
    </style>
    <script type="text/javascript">

        /* 获取当前时间 */
        function show() {
            let date = new Date();
            let hour = date.getHours();
            let min = date.getMinutes();
            let sec = date.getSeconds();
            document.getElementById("time").innerHTML = format(hour) + ":" + format(min) + ":" + format(sec);
        }

        /* 格式化时间 */
        function format(num) {
            if (num < 10) {
                num = "0" + num;
            }
            return num;
        }

        /* 获取随机颜色 */
        function randomRgbColor() { //随机生成RGB颜色
            let r = Math.floor(Math.random() * 256);
            let g = Math.floor(Math.random() * 256);
            let b = Math.floor(Math.random() * 256);
            document.getElementById("time").setAttribute("style", "color:rgb(" + r + "," + g + "," + b + ")");
        }

    </script>
</head>
<body>
<div>
    <h1 id="time"></h1>
</div>
<script type="text/javascript">
    setInterval(show, 1000);
    setInterval(randomRgbColor, 1000);
    show();
</script>
</body>
</html>